<!-- 表格问答 -->

<template>
  <div class="DetailQuestionnaire-MyStatistic-table">
    <div class="relative">
      <div class="quar full inFlexCC" />
      <div class="quar3">
        <div
          v-for="option in obj.optionList"
          :key="option.id"
          class="DetailQuestionnaire-MyStatistic-table-row"
          :class="widthClass"
        >
          <div>
            <b>{{ option.content }}</b>
          </div>
        </div>
      </div>
    </div>

    <div v-for="question in obj.questionList" :key="question.id" class="relative">
      <div class="quar full inFlexCC">{{ question.title }}</div>
      <div class="quar3">
        <div v-for="sub in question.questionList" :key="sub.no" class="row3 inFlexCC" :class="widthClass">
          <ChartColumn v-bind="sub.numChart" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MyRadioTable from '../MyRadioTable'

// ============================== 导出组件 ============================== //

export default CORE.extend(MyRadioTable, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyTextareaTable',

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...MyRadioTable.computed,

    /**
     * 宽度样式类
     */
    widthClass() {
      const len = this.obj.optionList.length
      switch (len) {
        case 2: return 'half'
        case 3: return 'third'
        case 4: return 'quar'
        default: return null
      }
    },
  },
})
</script>
